import React from "react";
import {Col, Form, Row, Table} from "antd";
import {LdhButton, LdhFormItem, LdhInput, LdhTextArea} from "../../biz/Components";
import Action from "./Action";


const prefix = "setting-page";
const columns = [
    {title: "名称", dataIndex: "name", key: "name"},
    {title: "操作", dataIndex: "action", key: "action"}
]
export default class SettingPage extends React.Component {
    formRef = React.createRef();

    constructor() {
        super();
        this.state = {
            item: {},
            detailStatus: "",
            list: []
        }
        this.action = new Action(this);
    }

    componentDidMount() {
        columns[columns.length - 1].render = this.renderRowAction.bind(this);
        this.handleGetList();

    }

    handleGetList() {
        this.action.getSettingList();
    }

    renderRowAction(v, vo) {
        return <div>
            <LdhButton onClick={this.handleEdit.bind(this, vo)} size="small" type="link">编辑</LdhButton>
            <LdhButton onClick={this.handleDelete.bind(this, vo)} size="small" type="link" danger>删除</LdhButton>
        </div>
    }



    handleAdd() {
        let {item} = this.state;
        for (let key in item) {
            item[key] = "";
        }
        this.setItem({}, "add");
    }

    handleEdit(item) {
        this.action.getSetting(item.name, (vo) => this.setItem(vo, "edit"));
    }

    handleDelete(item) {
        this.action.deleteSetting(item.name);
    }

    handleReset() {
        this.formRef.current.resetFields();
    }

    setItem(item, detailStatus) {
        this.formRef.current.setFieldsValue(item);
        this.setState({item, detailStatus});
    }

    handleSave() {
        let {item} = this.state;
        this.formRef.current.validateFields().then((vo) => {
            vo.oldName = item.name;
            this.action.saveSetting(vo);
        });
    }


    renderDetail() {
        let {detailStatus, item} = this.state;
        return <Form ref={this.formRef} initialValues={item} labelCol={{flex: '120px'}} wrapperCol={{flex: 1}}
                     className={detailStatus == "" && "hidden"}>
            <LdhFormItem name="name" label="名称" required>
                <LdhInput/>
            </LdhFormItem>
            <LdhFormItem name="url" required tooltip="已发送邮件界面刷新按钮触发的请求地址，可以用listmessage过滤">
                <LdhInput/>
            </LdhFormItem>
            <LdhFormItem name="send_var" required tooltip="已发送邮件请求，var参数">
                <LdhTextArea/>
            </LdhFormItem>
            <LdhFormItem name="delete_var" required tooltip="已删除邮件请求，var参数">
                <LdhTextArea/>
            </LdhFormItem>
            <LdhFormItem name="cookie" required>
                <LdhTextArea style={{minHeight: 80}}/>
            </LdhFormItem>

            <div className="flex-end">
                <LdhButton onClick={this.handleReset.bind(this)} className="mr-8">重置</LdhButton>
                <LdhButton type="primary" onClick={this.handleSave.bind(this)}>保存</LdhButton>
            </div>

        </Form>
    }

    render() {
        let {list = []} = this.state;

        return <Row className={prefix}>
            <Col flex="400px">
                <div className="flex-between">
                    <LdhButton onClick={this.handleGetList.bind(this)}>刷新</LdhButton>
                    <LdhButton onClick={this.handleAdd.bind(this)} type="primary">添加</LdhButton>
                </div>
                <Table dataSource={list} columns={columns} pagination={false}/>
            </Col>
            <Col flex="auto">
                {this.renderDetail()}
            </Col>
        </Row>
    }
}
